let percentage
let angle
let td = document.querySelectorAll('tbody td')
let theadTd = document.querySelectorAll('thead td')
let th = document.querySelectorAll('tbody th')
let operatorDiv = document.querySelectorAll('.operator')
let valueDefine = document.querySelectorAll('.truthItem')
let hash = [true, false, 1, 0, -1, "true", "false", "1", "0", "-1", "", null, undefined, Infinity, -Infinity, [], {},
    [
        []
    ],
    [0],
    [1], NaN
]
let hash2 = [true, false, 1, 0, -1, "true", "false", "1", "0", "-1", "", null, undefined, Infinity, -Infinity, [], {},
    [
        []
    ],
    [0],
    [1], NaN
]
let operatorHash = ["==", "===", "!=", "!==", ">", ">=", "<", "<=", "+", "-", "*", "=", "&", "&&", "|", "||"]
let operator = "=="

//初始化真值表头
hash.forEach(
    function(value, key) {
        theadTd[key].innerText = JSON.stringify(value)
        th[key].innerText = JSON.stringify(value)
    }
)

//初始化运算符文字
operatorHash.forEach(
    function(value, key) {
        operatorDiv[key].innerText = value
    }
)

//
hash.forEach(
    function(value, key) {
        valueDefine[key].innerText = JSON.stringify(value)
    }
)

//渲染单元格颜色
percentage = coloredTable.call(undefined, hash, hash2, operator)

//监听运算按钮事件
for (let i = 0; i < operatorDiv.length; i++) {
    operatorDiv[i].onclick = function(e) {
        operator = e.target.innerText
        percentage = coloredTable.call(undefined, hash, hash2, operator)
        clearActiveOperator()
        e.target.classList.add('active')
        angle = 360 * percentage
        drawPaste(angle)
    }
}

//清除运算按钮样式
function clearActiveOperator() {
    for (let i = 0; i < operatorDiv.length; i++) {
        operatorDiv[i].classList.remove('active')
    }
}

function coloredTable(hash, hash2, operator) {
    let truthCounter = 0
    operatorText.innerText = operator
    hash.forEach(
            function(value1, key1) {
                hash2.forEach(
                    function(value2, key2) {
                        let tableTop = key1
                        let tableLeft = key2
                        let isTrue = "value1" + operator + "value2"
                        td[tableTop * 21 + tableLeft].classList.remove("true")
                        td[tableTop * 21 + tableLeft].classList.remove("false")
                        if (eval(isTrue)) {
                            td[tableTop * 21 + tableLeft].classList.add("true")
                            truthCounter += 1
                        } else {
                            td[tableTop * 21 + tableLeft].classList.add("false")
                        }
                    }
                )
            }
        )
        //返回真值比例
    return (truthCounter / Math.pow(hash.length, 2))
}

//绘制canvas

let canvas = document.querySelector('.paste')
angle = 360 * percentage
drawPaste(angle)

//画扇形
function drawPaste(angle) {
    clear()
    let step = Math.ceil(angle / 30)
    drawInterval(angle, step)
}

//渐进绘制扇形
function drawInterval(angle, step) {
    let currentAngle = 0
    let timer = window.setInterval(function() {
        currentAngle = (currentAngle >= angle ? clearInterval(timer) : currentAngle + step)
        draw(currentAngle)
    }, 10)
}

//绘制一个扇形
function draw(angle) {
    let radian = (2 - angle / 180) * Math.PI
    let x = 150 * Math.cos(angle * Math.PI / 180)
    let y = 150 * Math.sin(angle * Math.PI / 180)
    var ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.arc(150, 150, 150, 0, radian, true)
    ctx.fillStyle = "#afa"
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = (angle > 180 ? "#fff" : "#afa")
    ctx.moveTo(150, 150)
    ctx.lineTo(300, 150)
    ctx.lineTo(150 + x, 150 - y)
    ctx.fill()
}

//清除画布
function clear() {
    var ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, 300, 300)
}